<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom">
      <el-col :span="12" class="myLineHeight_40px">{{title}}</el-col>
      <el-col :span="12" class="myTextAlignRight">
        <el-button type="primary" class="myBgGreen" @click="onChart">{{buttonText}}</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px" :gutter="10">
      <el-col :span="6">
        <template>
          <el-cascader
          placeholder="全部项目/小区"
          :options="regionOptions"
          v-model="regionOptSelected"
          ></el-cascader>
        </template>
      </el-col>
      <el-col :span="4">
        <template>
          <el-select
            v-model="regionValue"
            multiple 
            collapse-tags
            class="mySelect"
            placeholder="所有区域">
            <el-option
              v-for="item in dataRegion"
              :key="item.access_area_id"
              :label="item.access_area_name"
              :value="item.access_area_id">
            </el-option>
          </el-select>
        </template>
      </el-col>
      <el-col :span="6">
        <el-date-picker
          v-model="time"
          type="daterange"
          :editable="false"
          :clearable="false"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-col>
      <el-col :span="3">
        <el-button type="primary" class="myBgGreen" @click="onSearch">查 询</el-button>
      </el-col>
    </el-row>
    <el-row class="myMarginTop_10px">
      <el-col :span="24" v-if="isChart">
        <el-table
          ref="multipleTable"
          :data="list"
          :border = true
          :stripe = true
          v-loading="loading"
          v-if="showTable"
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="60">
          </el-table-column>
          <el-table-column
            prop="access_area_name"
            label="统计区域"
            >
          </el-table-column>
          <el-table-column
            width="110"
            prop="date_field"
            label="统计时间"
            >
          </el-table-column>
          <el-table-column
            prop="stat_val"
            label="总人数"
            >
          </el-table-column>
          <el-table-column
            prop="item1"
            label="0-2时"
            >
          </el-table-column>
          <el-table-column
            prop="item2"
            label="2-4时"
            >
          </el-table-column>
          <el-table-column
            prop="item3"
            label="4-6时"
            >
          </el-table-column>
          <el-table-column
            prop="item4"
            label="6-8时"
            >
          </el-table-column>
          <el-table-column
            prop="item5"
            label="8-10时"
            >
          </el-table-column>
          <el-table-column
            prop="item6"
            label="10-12时"
            >
          </el-table-column>
          <el-table-column
            prop="item7"
            label="12-14时"
            >
          </el-table-column>
          <el-table-column
            prop="item8"
            label="14-16时"
            >
          </el-table-column>
          <el-table-column
            prop="item9"
            label="16-18时"
            >
          </el-table-column>
          <el-table-column
            prop="item10"
            label="18-20时"
            >
          </el-table-column>
          <el-table-column
            prop="item11"
            label="20-22时"
            >
          </el-table-column>
          <el-table-column
            prop="item12"
            label="22-24时"
            >
          </el-table-column>
          <el-table-column
            prop="area_name"
            label="统计小区"
            >
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" v-else>
        <vue-highcharts :Highcharts="Highcharts" :options="option" ref="visitorChart" style="height: 600px"></vue-highcharts>
      </el-col>
    </el-row>
  </div>
</template>

<style>
  .mySelect .el-input__inner,.mySelect .el-select__tags{
    height: 40px !important;
    overflow: hidden;
  }
  .mySelect.el-select .el-tag{
    margin: 8px 0 3px 6px !important;
  }
</style>
<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
    padding-bottom: 5px;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myColorRed{
    color: #f00;
  }
</style>

<script>
    import VueHighcharts from 'vue2-highcharts';
    import Highcharts from  "highcharts";
    import { getRegion } from '@/utils/localstorage';
    import { extractAreaIds } from '@/utils/misc';
    import {  } from '@/api/statisticalAnalysis';
    import { getChartList , getAccessTimeShare , getAccessArea } from '@/api/entrance_guard';
    export default {
    data(){
        return{  
          title:"门禁通行数据",   
          loading:false,
          time:[
            new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate(),
            new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()
          ],
          dataRegion:[],
          regionValue:'',
          regionOptions: [],
          regionOptSelected: [],
          list:[],
          isChart:true,
          showTable:true,
          fs:[],
          buttonText:'图表',
          Highcharts: Highcharts,
          option:{
            chart: {
                zoomType: ''
            },
            title: {
                text: '门禁通行数据'
            },
            subtitle: {
                text: ''
            },
            credits:{
                  enabled: false  
              },
              colors:[
                  '#ffa92e',
                  '#00c2a9',
                  '#2eb3ff',
                  '#5db0eb',
                  '#d87c7a',
                  '#8698b5'
                ],
            xAxis: [{
                categories: ['0-2时','2-4时','4-6时','6-8时','8-10时','10-12时','12-14时','14-16时','16-18时','18-20时','20-22时','22-24时'],
                crosshair: true
            }],
            yAxis: [{ 
                labels: {
                    format: '{value}次',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: '次数',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                }
            }],
            tooltip: {
                shared: true
            },
            labels: {
                items: [{
                    html: '',
                    style: {
                        left: '100px',
                        top: '18px',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
                    }
                }]
            },
            series: []
          }
      }
    },
    created() {
      document.title=this.title;
      this.regionOptions = getRegion();
      this.regionOptSelected.push(this.regionOptions[0].value,this.regionOptions[0].children[0].value,this.regionOptions[0].children[0].children[0].value);
      
      this.onGetAccessArea();
      this.onGetChartList();
    },
    computed: {
        areaIds() {
          return extractAreaIds(this.regionOptSelected, this.regionOptions);
        }
    },
    watch:{
      areaIds(curVal,oldVal){
        this.onGetAccessArea();
      }
    },
    components: {
        VueHighcharts 
    },
    methods:{
        onSearch(){
          let vm=this;
          vm.onGetChartList();
        },
        onGetAccessArea(){
          let vm=this;
          let params={
            area_id:vm.areaIds
          }
          
          getAccessArea(params).then(response => {
            let res=response.data;
            vm.dataRegion=res.rows;
          }).catch(error => {
            console.log(error)
          })
        },  
        onChart(){
          let vm=this;
          vm.isChart=!vm.isChart;
          if(vm.isChart){
            vm.buttonText='图表'
          }else{
            vm.buttonText='表格'
            setTimeout(function(){vm.onSetChartData()},100);
          }
        },
        onGetChartList(){
          let vm=this;
          let params={
            area_id:vm.areaIds,
            start_date:vm.time[0]+' 00:00:00',
            end_date:vm.time[1]+' 23:59:59',
            access_arad_ids:vm.regionValue.toString()
          }
          getChartList(params).then(response => {
            vm.list=response.data;
            vm.showTable=false;
            getAccessTimeShare(params).then(response => {
              let res=response.data;
              let fsitem=[];
              let num=0;
              let visitorChart = vm.$refs.visitorChart;
              vm.fs=[];
              for(let i in vm.list){
                for(let j in res){
                  if(vm.list[i].access_area_id==res[j].access_area_id){
                    fsitem.push(res[j].stat_val);
                    vm.list[i]['item'+(++num)]=res[j].stat_val
                  }
                }
                num=0;
                vm.fs.push(fsitem);
                fsitem=[];
              }
              vm.showTable=true;
              vm.onSetChartData();
            }).catch(error => {
              console.log(error)
            })
          }).catch(error => {
            console.log(error)
          })
        },
        onSetChartData(){
          let vm=this,
              lengthNum=vm.list.length,
              reg=new Array(lengthNum),
              visitorChart = vm.$refs.visitorChart;
          if(!visitorChart)return false;
          if(vm.$refs.visitorChart.getChart().series.length){
            for(let i=0; i<vm.$refs.visitorChart.getChart().series.length; ){
              vm.$refs.visitorChart.getChart().series[0].remove();
            }
          }
          for(let i=0; i<lengthNum; i++){
            reg[i]={'name':'','y':''};
            reg[i]['name']=vm.list[i].access_area_name;
            reg[i]['y']=vm.list[i].stat_val;

            vm.$refs.visitorChart.getChart().addSeries({
              name: vm.list[i].access_area_name,
              data: vm.fs[i],
              type: 'spline',
              tooltip: {
                valueSuffix: '次'
              }
            })
          }
          vm.$refs.visitorChart.getChart().addSeries({
            type: 'pie',
            name: '总次数',
            data: reg,
            center: [100, 80],
            size: 100,
            showInLegend: false,
            dataLabels: {
                enabled: true
            }
          })
        }

      
    }

  }


</script>



